<template>
	<div class="u-page" style="background:#f7f7f7">
		<section class="aui-flexView">
			<section class="aui-scrollView">
				<div class="aui-order-box">
					<div class="aui-flex aui-choice-white">
						<div class="aui-flex-box">
							<h1>清单</h1>
						</div>
					</div>

					<div class="aui-flex aui-flex-default aui-mar15">
						<div class="aui-flex-goods">
							<img :src="form.CommodityPicture" alt="">
						</div>
						<div class="aui-flex-box">
							<div class="solitaire-title">
								{{form.CommodityName}}
							</div>
							<div class="aui-flex aui-flex-clear">
								<div class="aui-flex-box">￥{{form.CommodityPrice}}</div>
							</div>
						</div>
					</div>

					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">收货地址</div>
						<div class="u-flex u-col-center">
							<div class="u-center" style="color: #03A9F4;">
								<span class="u-pl-5" @click="toSelectAddress">选择</span>
							</div>
						</div>
					</div>

					<div class="aui-flex aui-choice-white b-line"
						style="display: flex;justify-content: center;align-items: center;">
						<div v-if="JSON.stringify(addressObj) !== '{}'">
							<div class="cont-right">
								<P><span class="xmname">姓名：</span><span class="name">{{addressObj.Name}}</span></P>
								<P><span class="xmname">电话：</span><span class="name">{{addressObj.PhoneNum}}</span></P>
								<P><span class="xmname">地址：</span><span
										class="name">{{addressObj.Region.replace(/'-'/g, '')}}-{{addressObj.StreetVillage.replace(/'-'/g, '')}}
										{{addressObj.Address}}</span></P>
							</div>
						</div>

						<div v-else>
							<div class="item-area u-pt-50 u-pb-50" style="margin: 0 auto;">
								<u-empty text="暂无收货地址" mode="data"></u-empty>
							</div>
						</div>
					</div>
					
					<div class="aui-flex aui-choice-white b-line">
						<div class="aui-flex-box">备注</div>
						<div style="width: 480rpx;">
							<u-input v-model="form.orderRemarks" input-align="right" :placeholder-style="(remarkSwitch&&form.remarkReminder)?'color:red;':''" :placeholder="form.reminderContent?form.reminderContent:'请按领取样品规则填写备注！'" />
						</div>
					</div>
				</div>
			</section>
			
			<div style="height: 250rpx;"></div>

			<div class="aui-bar-footer">
				<div class="aui-flex">

					<div class="aui-flex-box">
						应付金额：<span>￥0</span>
					</div>

					<div>
						<u-button :disabled="isClick"
							:custom-style="{background:'#e55e97',padding:'52rpx 50rpx',color:'#fff',fontSize:'28rpx',borderRadius:'0rpx'}"
							hover-class="none" @click="placeOrder">领取样品</u-button>
					</div>
				</div>
			</div>
		</section>


		<!-- 是否确认领取 -->
		<u-modal 
		  ref="uModal"
		  title="平台提示"
		  v-model="buy_show"
		  show-cancel-button
		  confirm-text="确认"
		  cancel-text="取消"
		  @confirm="confirmBuy"
		  confirm-color="#e55e97"
		>
		  <div class="u-p-20" style="text-align: center;">
		      <p>确认领取？</p>       
		  </div>
		</u-modal>
		
	</div>
</template>

<script>
	import globalData from "@/globalData";
	export default {
		data() {
			return {
				form: {},
				isClick: false,
				buy_show: false,
				addressObj: {}, // 收货地址
				remarkSwitch: false
			}
		},

		onLoad(options) {

			// 未登录跳转到登录页面
			var loginRes = this.checkLogin()
			if (!loginRes) {
				return false;
			}

			let form_info = decodeURIComponent(options.formData)
			if (this.isNotNull(form_info)) {
				this.form = JSON.parse(form_info);
				this.form.orderRemarks = "";
				
				console.log("领取样品this.form=", this.form);
			}

			// 选中的收货地址
			uni.$on("AddressObj", (obj = {}) => {
				this.addressObj = obj;
			});

			// 获取默认收货地址
			if (JSON.stringify(this.addressObj) === '{}') {
				this.getDefaultAddress();
			}
			
		},

		methods: {

			/**
			 * 获取默认收货地址
			 */
			async getDefaultAddress() {
				const userInfo = uni.getStorageSync('userInfo')
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/minrest",
					appid: 'meily',
					wf_num: 'R_meily_BL014',
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == '200') {
					if (result.data) {
						this.addressObj = result.data;
					}
				}
			},
			
			/**
			 * 领取样品
			 */
			async placeOrder() {
				
				// 第1步 判断是否已经选择了收货地址
				if (JSON.stringify(this.addressObj) === '{}') {
					this.$u.toast("请选择收货地址！");
					return
				} else if(!this.isNotNull(this.addressObj.Name)){
					this.$u.toast("收货人姓名不能为空！");
					return;
				} else if(!this.verificationName(this.addressObj.Name)){
					this.$u.toast("收货人姓名至少包含一个字母或一个中文！");
					return;
				} else if(!this.isNotNull(this.addressObj.PhoneNum)){
					this.$u.toast("手机号码不能为空！");
					return;
				} else if(!this.verificationPhone(this.addressObj.PhoneNum)){
					this.$u.toast("手机号码不合法！");
					return;
				} else if(!this.isNotNull(this.addressObj.Region) || !this.isNotNull(this.addressObj.StreetVillage) || !this.isNotNull(this.addressObj.Address)){
					// 检验地址是否填写完毕
					this.$u.toast("地址信息尚未完整！");
					return;
				} else if(this.form.remarkReminder==1 && !this.isNotNull(this.form.orderRemarks)) {
					this.remarkSwitch = true
					this.$u.toast("请填写备注！");
					return;
				} else { 
					this.buy_show = true;
				}
			},

			/**
			 * 确定领取
			 */
			async confirmBuy() {
				
				// 收货地址信息
				this.form.consigneeName = this.addressObj.Name;// 收货人姓名
				this.form.consigneePhoneNum = this.addressObj.PhoneNum;// 手机号码
				this.form.consigneeAddress = this.addressObj.Region + "-" + this.addressObj.StreetVillage + " " + this.addressObj.Address;// 收货地址
				
				console.log("确定领取this.form=", this.form);
				
				const userInfo = uni.getStorageSync('userInfo')
				let result = await this.$u.api.unifyRequest({
					appid: 'ProductPromote',
					wf_num: 'R_ProductPromote_BL005',
					userId: userInfo.userId,
					nickName: userInfo.nickName,
					WF_formData: this.form,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if(result.code == '200'){
					let SubDocUnid = result.SubDocUnid;
					uni.reLaunch({url:'/pages_private_scene2/ProductPromote/common/result?mode=8&SubDocUnid='+SubDocUnid+'&Subject='+this.form.Subject+'&EndTime='+this.form.EndTime+'&InitiatorName='+this.form.InitiatorName});
				} else {
					this.$u.toast(result.msg);
				}
			},
			
			/**
			 * 选择收货地址
			 */
			toSelectAddress() {
				this.$u.route('/pages_tabbar_contact/personal_contact/AddressList?type=select');
			},

		}
	}
</script>

<style scoped>
	aui-flexView {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.aui-scrollView {
		width: 100%;
		height: 100%;
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		-ms-flex: 1;
		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
		position: relative;
		margin-top: 0;
	}

	.aui-navBar {
		height: 44px;
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		z-index: 1002;
		background: #f7f7f7;
	}

	.b-line {
		position: relative;
	}

	.b-line:after {
		content: '';
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 1px;
		border-bottom: 1px solid #e2e2e2;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
	}

	.aui-navBar-item {
		height: 44px;
		min-width: 25%;
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 25%;
		-ms-flex: 0 0 25%;
		flex: 0 0 25%;
		padding: 0 0.9rem;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		font-size: 0.7rem;
		white-space: nowrap;
		overflow: hidden;
		color: #353535;
		position: relative;
	}

	.aui-navBar-item:first-child {
		-webkit-box-ordinal-group: 2;
		-webkit-order: 1;
		-ms-flex-order: 1;
		order: 1;
		margin-right: -25%;
		font-size: 0.9rem;
		font-weight: bold;
	}

	.aui-navBar-item:last-child {
		-webkit-box-ordinal-group: 4;
		-webkit-order: 3;
		-ms-flex-order: 3;
		order: 3;
		-webkit-box-pack: end;
		-webkit-justify-content: flex-end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}

	.aui-center {
		-webkit-box-ordinal-group: 3;
		-webkit-order: 2;
		-ms-flex-order: 2;
		order: 2;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
		height: 44px;
		width: 50%;
		margin-left: 25%;
	}

	.aui-center-title {
		text-align: center;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		display: block;
		text-overflow: ellipsis;
		font-size: 0.95rem;
		color: #333;
	}

	.icon {
		width: 20px;
		height: 20px;
		display: block;
		border: none;
		float: left;
		background-size: 20px;
		background-repeat: no-repeat;
	}

	.aui-flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 15px;
		position: relative;
	}

	.aui-flex-box {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		min-width: 0;
		font-size: 14px;
		color: #333;
	}

	.aui-choice-white {
		background: #fff;
	}

	.aui-order-box {
		padding: 10px 20px;
	}

	.aui-flex-goods {
		margin-right: .8em;
		width: 80px;
		height: 80px;
		line-height: 80px;
		text-align: center;
	}

	.aui-flex-goods img {
		width: 100%;
		max-height: 100%;
		vertical-align: top;
	}

	.aui-flex-default {
		background: #f3f1f1;
	}

	.aui-flex-default h2 {
		font-size: 14px;
		width: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-wrap: normal;
		word-wrap: break-word;
		word-break: break-all;
		padding-bottom: 5px;
	}

	.aui-flex-default p {
		color: #999999;
		font-size: 12px;
	}

	.aui-flex-clear {
		padding: 0;
		margin-top: 20px;
	}

	.aui-flex-clear .aui-flex-box {
		color: #f21956;
		font-weight: bold;
	}

	.aui-mar15 {
		margin-bottom: 15px;
	}

	.aui-flex-box h2 {
		font-size: 16px;
		padding-bottom: 5px;
	}

	.aui-flex-box h3 {
		font-size: 14px;
		padding-bottom: 5px;
	}

	.aui-flex-box p {
		font-size: 12px;
		color: #999;
		line-height: 1.2;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.aui-bar-footer {
		line-height: 52px;
		height: 52px;
		background: #fff;
		box-shadow: 0 -2px 10px #ddd;
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.aui-btn-button {
		background: #f21956;
		padding: 0 25px;
		color: #fff;
		font-size: 14px;
	}

	.aui-bar-footer .aui-flex {
		padding: 0;
	}

	.aui-bar-footer .aui-flex-box {
		padding-left: 15px;
	}

	.aui-bar-footer .aui-flex-box span {
		font-style: normal;
		color: #f21956;
	}

	.cnt {
		padding-top: 1px;
		color: #e61111;
		position: relative;
		line-height: 22px;
		font-size: 14px;
		font-weight: 500;
	}

	.popup-box {
		padding-bottom: 50rpx;
		padding-top: 50rpx;
	}

	.popup-item {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 33rpx;
	}

	.aui-tag {
		display: inline
	}

	.cont-right {
		display: flex;
		flex-direction: column;
	}

	.cont-right p {
		width: 100%;
	}

	.xmname {
		opacity: 0.7;
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #3B353C;
		line-height: 22px;
	}

	.name {
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #3B353C;
		letter-spacing: 0;
		line-height: 22px;
	}

	.solitaire-title {
		display: -webkit-box;
		/*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/
		-webkit-line-clamp: 2;
		/*设置多少行*/
		-webkit-box-orient: vertical;
		/*必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式*/
		overflow: hidden;
		/*文本会被修剪，并且剩余的部分不可见*/
		text-overflow: ellipsis;
		/*显示省略号来代表被修剪的文本*/
		font-size: 14px;
	}
	
	.color-red {
		color: #f95c0f;
	}
	
	.font-weight-550 {
		font-weight: 550;
	}
	
	.success-modal-bottom {
		background: url(https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/icon/Share/ShareTips.png) no-repeat;
		background-size: 100%;
		height: 60rpx;
	}
	
	.success-modal-share {
		display: flex;
		justify-content: center;
		padding-top: 280rpx;
	}
	
	.success-modal-content {
		background: url(https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/icon/Share/ShareBG.png) no-repeat;
		background-size: 100% 100%;
		height: 630rpx;
		width: 500rpx;
	}
	
	.buy-goods-share {
		font-size: 30rpx;
		width: 250rpx;
		height: 70rpx;
		padding: 0;
		background: url(https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/icon/Share/ShareBtn.png) repeat;
		background-size: cover;
		border: none !important;
		padding-left: 0rpx !important;
		padding-right: 0rpx !important;
		padding-top: 6rpx !important;
	}
	
	.mask-solt {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
	
	.mask-close {
		display: flex;
		justify-content: center;
	}
	
	.official-account-bg {
		background: url(https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/icon/Share/ShareofficialAccount.png) no-repeat;background-size: 100% 100%;
		width: 540rpx;
		height: 780rpx;
	}
</style>